<template>
  <div>
    <a-form layout="inline" :model="queryModel" v-if="searchBox">
      <a-form-item label="搜索词">
        <a-input v-model:value="queryModel.keyWord" placeholder="请输入搜索关键字名称" />
      </a-form-item>
      <a-form-item label="决议类型" name="region">
        <a-select v-model:value="queryModel.type" placeholder="请选择决议类型">
          <a-select-option :value="1">管理规约修订</a-select-option>
          <a-select-option :value="2">业主委员会选举</a-select-option>
          <a-select-option :value="3">物业服务质量评价</a-select-option>
          <a-select-option :value="0">其他</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="投票类型" name="region">
        <a-select v-model:value="queryModel.status" placeholder="请选择投票类型">
          <a-select-option :value="0">文字</a-select-option>
          <a-select-option :value="1">图文</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="时间">
        <a-range-picker v-model:value="queryModel.timeRange" format="YYYY-MM-DD HH:mm:ss" />
      </a-form-item>
      <a-space>
        <a-button type="primary" @click="list">查询</a-button>
        <a-button @click="resetQuery">重置</a-button>
      </a-space>
    </a-form>
    <div class="functionBox">
      <a-space class="left">
        <a-button type="dashed" :icon="h(PlusOutlined)" @click="operator(0)">新增</a-button>
        <a-popconfirm title="是否要真的要批量删除这些通知嘛!" @confirm="remove(null)">
          <template #icon><question-circle-outlined style="color: red;" /></template>
          <a-button :disabled="rowsData.length == 0" type="dashed" :icon="h(MinusOutlined)">删除</a-button>
        </a-popconfirm>
      </a-space>
      <a-space class="right">
        <a-button size="small" shape="circle" :icon="h(ReloadOutlined)" @click="list()" />
        <a-button size="small" shape="circle" :icon="h(SearchOutlined)" @click="() => searchBox = !searchBox" />
      </a-space>
    </div>
    <div ref="basePoint" :style="`height: ${ windowHeight - elementToTopHight - 7 }px !important;`">
      <a-table
          :columns="columns"
          @resizeColumn="handleResizeColumn"
          :rowKey="( record : Resolution ) => record.id"
          :row-selection="{ onChange: selectData }"
          :pagination="false"
          :locale="{ emptyText: '暂无数据' }"
          :data-source="data"
          :scroll="{ y: ( windowHeight - elementToTopHight - 116 ) + 'px' }"
      >
        <template  #bodyCell="{ column , record  }">
          <template v-if="column.dataIndex === 'status'">
            <a-tag color="#87d068" v-if="record.status == 0">未开始</a-tag>
            <a-tag color="#108ee9" v-if="record.status == 1">已开始</a-tag>
            <a-tag color="#f50" v-if="record.status == 2">已结束</a-tag>
          </template>
          <template v-else-if="column.dataIndex === 'type'">
            <a-tag color="orange">{{ record.type == 1 ? '管理规约修订' : record.type == 2 ? '业主委员会选举' : record.type == 3 ? '物业服务质量评价' : '其他' }}</a-tag>
          </template>
          <template v-else-if="column.dataIndex === 'cover'">
            <a-image
                v-if="record.cover"
                :width="62"
                style="border-radius: 50%"
                :src=" proxy.PicPrefixUrl + record.cover"
            />
          </template>
          <template v-else-if="column.dataIndex === 'isAnonymity'">
            {{ record.isAnonymity == 0 ? '是' : '否' }}
          </template>
          <template v-else-if="column.dataIndex === 'pushUser'">
            <span v-if="record.user">{{ record.user.realName + "-" + record.user.phoneNumber }}</span>
          </template>
          <template v-else-if="column.dataIndex === 'multiple'">
            {{ record.multiple == 0 ? '是' : '否' }}
          </template>
          <template v-else-if="column.dataIndex === 'voteType'">
            {{ record.voteType == 0 ? '文字' : '图文' }}
          </template>
          <template v-else-if="column.dataIndex === 'showWay'">
            {{ record.showWay == 0 ? '投完可见' : record.showWay == 1 ? '随时可见' : record.showWay == 2 ? '发起人看见' : '' }}
          </template>
          <template v-else-if="column.dataIndex === 'endTime'">
            {{ dayjs(record.endTime).format('YYYY-MM-DD') }}
          </template>
          <template v-else-if="column.dataIndex === 'startTime'">
            {{ dayjs(record.startTime).format('YYYY-MM-DD') }}
          </template>
          <template v-else-if="column.dataIndex === 'action'">
            <a-button
                type="link"
                size="small"
                @click="operator(1, record)"
            >编辑</a-button>
            <a-button
                type="link"
                size="small"
                @click="lookVoteInfo(record.id, record.title)"
            >投票详情</a-button>
          </template>
        </template>
      </a-table>
      <div class="pagination">
        <a-pagination
            size="small"
            :disabled="total == 0"
            :total="total"
            show-size-changer
            @change="pageChange"
            show-quick-jumper />
      </div>
    </div>


    <a-modal
        v-model:open="operatorStore.open"
        :title="operatorStore.cmd == 1 ? '编辑决议' : '新增决议'"
        :footer="null"
        :width="900"
    >
        <ResolutionFrom v-if="operatorStore.open" :resolution="operatorStore.resolution" @cancel="cancel" @submit="submit" />
    </a-modal>

    <a-modal
        v-model:open="voteStore.open"
        :footer="null"
        :width="900"
        @cancel="()=> { voteStore.open = false }"
    >
      <VoteInfo v-if="voteStore.open" :title="voteStore.title" :resolutionId="voteStore.id" />
    </a-modal>

  </div>
</template>


<script setup lang="ts">
    import useResolution from "@/hooks/useResolution";
    import { h , getCurrentInstance } from "vue";
    import {
      MinusOutlined,
      PlusOutlined,
      QuestionCircleOutlined,
      ReloadOutlined,
      SearchOutlined,
      EditOutlined
    } from "@ant-design/icons-vue";
    import DynamicHeight from "@/utils/DynamicHeight";
    import type {Resolution} from "@/interface/Resolution";
    import ResolutionFrom from "@/components/From/ResolutionFrom.vue";
    const { basePoint , windowHeight , elementToTopHight } = DynamicHeight();
    import dayjs from "dayjs"
    import { useSocket } from "@/stores/Socket";
    import VoteInfo from "@/components/VoteInfo.vue";

    const socket = useSocket();

    const { proxy } = getCurrentInstance() as any;

    const {
      queryModel , pageChange ,  columns , list , searchBox , operator, operatorStore ,
      handleResizeColumn , resetQuery , data , total , selectData , rowsData ,
      cancel , submit , remove , voteStore , lookVoteInfo , closeVoteInfo
    } = useResolution();





</script>

<style scoped lang="scss">
    .functionBox {
      margin: 18px 0 12px 0;
      display: flex;
      justify-content: space-between;
    }
    .pagination {
      margin: 8px 0;
      display: flex;
      justify-content: end;
    }
</style>
